<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/main}">
<head>
    <title th:text="${lowStock} ? '库存预警' : '商品管理'">商品管理</title>
</head>
<body>
    <div layout:fragment="title" th:text="${lowStock} ? '库存预警' : '商品管理'">商品管理</div>
    
    <div layout:fragment="content">
        <!-- 顶部操作栏 -->
        <div class="row mb-3">
            <!-- 搜索框 -->
            <div class="col-md-6">
                <form th:action="@{/products}" method="get" class="d-flex">
                    <input type="text" name="keyword" th:value="${keyword}" class="form-control me-2" placeholder="搜索商品名称...">
                    <button type="submit" class="btn btn-primary">搜索</button>
                </form>
            </div>
            <!-- 操作按钮 -->
            <div class="col-md-6 text-end">
                <a th:href="@{/products/add}" class="btn btn-success">
                    <i class="bi bi-plus-circle"></i> 添加商品
                </a>
            </div>
        </div>
        
        <!-- 分类导航 -->
        <div class="row mb-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-body pb-0">
                        <ul class="nav nav-pills">
                            <li class="nav-item">
                                <a th:href="@{/products}" 
                                   th:classappend="${currentCategory == null && lowStock == null} ? 'active'" 
                                   class="nav-link">全部</a>
                            </li>
                            <li class="nav-item" th:each="category : ${categories}">
                                <a th:href="@{'/products/category/' + ${category}}" 
                                   th:text="${category}"
                                   th:classappend="${category == currentCategory} ? 'active'" 
                                   class="nav-link">分类</a>
                            </li>
                            <li class="nav-item">
                                <a th:href="@{/products/low-stock}" 
                                   th:classappend="${lowStock} ? 'active'" 
                                   class="nav-link text-danger">库存预警</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 商品列表 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="table-dark">
                                    <tr>
                                        <th scope="col">ID</th>
                                        <th scope="col">商品名称</th>
                                        <th scope="col">分类</th>
                                        <th scope="col">进价(元)</th>
                                        <th scope="col">售价(元)</th>
                                        <th scope="col">库存</th>
                                        <th scope="col">单位</th>
                                        <th scope="col">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:if="${#lists.isEmpty(products)}">
                                        <td colspan="8" class="text-center">暂无商品数据</td>
                                    </tr>
                                    <tr th:each="product : ${products}">
                                        <td th:text="${product.id}">1</td>
                                        <td>
                                            <a th:href="@{'/products/detail/' + ${product.id}}" th:text="${product.name}" class="text-decoration-none">商品名称</a>
                                            <span th:if="${product.quantity < 10}" class="badge bg-danger">库存不足</span>
                                        </td>
                                        <td th:text="${product.category}">分类</td>
                                        <td th:text="${#numbers.formatDecimal(product.purchasePrice, 1, 2)}">10.00</td>
                                        <td th:text="${#numbers.formatDecimal(product.sellingPrice, 1, 2)}">20.00</td>
                                        <td>
                                            <span th:text="${product.quantity}" th:class="${product.quantity < 10 ? 'text-danger fw-bold' : ''}">10</span>
                                        </td>
                                        <td th:text="${product.unit}">个</td>
                                        <td>
                                            <div class="btn-group btn-group-sm" role="group">
                                                <a th:href="@{'/products/detail/' + ${product.id}}" class="btn btn-info" title="查看">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                                <a th:href="@{'/products/edit/' + ${product.id}}" class="btn btn-primary" title="编辑">
                                                    <i class="bi bi-pencil"></i>
                                                </a>
                                                <a th:href="@{'/purchases/add?productId=' + ${product.id}}" class="btn btn-success" title="进货">
                                                    <i class="bi bi-cart-plus"></i>
                                                </a>
                                                <a th:href="@{'/sales/add?productId=' + ${product.id}}" class="btn btn-warning" title="销售">
                                                    <i class="bi bi-cart-check"></i>
                                                </a>
                                                <button type="button" class="btn btn-danger" title="删除" 
                                                        th:attr="onclick='confirmDelete(\'' + ${product.id} + '\',\'' + ${product.name} + '\')'">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 删除确认模态框 -->
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        您确定要删除商品 "<span id="productName"></span>" 吗？此操作无法撤销。
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <a href="#" id="confirmDeleteBtn" class="btn btn-danger">确认删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div layout:fragment="page_scripts">
        <script>
            function confirmDelete(id, name) {
                document.getElementById('productName').textContent = name;
                document.getElementById('confirmDeleteBtn').href = '/inventory/products/delete/' + id;
                var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
                deleteModal.show();
            }
        </script>
    </div>
</body>
</html> 